import React from 'react'
import { WingBlank, Grid, Flex, Carousel } from 'antd-mobile'
import axios from 'axios'
import './index.scss'
import Nav1 from '../../assets/images/nav-1.jpg'
import Nav2 from '../../assets/images/nav-2.jpg'
import Nav3 from '../../assets/images/nav-3.jpg'
import Nav4 from '../../assets/images/nav-4.jpg'
import '../../mock/index.js'

const NAVS = [
	{
		id: 1,
		img: Nav1,
		title: '整租',
		path: '/home/list'
	},
	{
		id: 2,
		img: Nav2,
		title: '合租',
		path: '/home/list'
	},
	{
		id: 3,
		img: Nav3,
		title: '地图找房',
		path: '/map'
	},
	{
		id: 4,
		img: Nav4,
		title: '去出租',
		path: '/rent'
	},
]
//获取地理位置信息
// navigator.geolocation.getCurrentPosition(position => {
// 	console.log(position);
// })

export default class Index extends React.Component {
	state = {
		swipers: [],
		isSwiperLoaded: false,
		groups: [],
		news: [],
		curCityName: '北京'
	}
	async getSwipers() {
		const { data } = await axios.get('/api/swipers')
		this.setState({
			swipers: data.data,
			isSwiperLoaded: true,
		})
	}

	async getGroups() {
		const { data } = await axios.get('/api/groups')
		this.setState({
			groups: data.data
		})
	}

	async getNews() {
		const { data } = await axios.get('/api/news')
		this.setState({
			news: data.data
		})
	}

	getCurCity(){
		const curCity = new window.BMapGL.LocalCity();
		curCity.get(res => {
			axios({
				method: 'get',
				url: '/api/citys',
				data: res.name
			}).then(result => {
				this.setState({
					curCityName: result.data.data.label
				})
			})
		});
	}


	componentDidMount() {
		this.getSwipers()
		this.getGroups()
		this.getNews()
		this.getCurCity()
	}

	renderSwipers() {
		return (this.state.swipers.map(item => (
			<a
				key={item.id}
				href="http://www.alipay.com"
				style={{ display: 'inline-block', width: '100%', height: 212 }}
			>
				<img
					src={item.url}
					alt={item.alt}
					style={{ width: '100%', verticalAlign: 'top' }}
				/>
			</a>
		)))
	}
	renderNavs() {
		return (NAVS.map(nav =>
			<Flex.Item
				key={nav.id}
				onClick={() => this.props.history.push(nav.path)}>
				<img src={nav.img} alt={nav.title} />
				<h2>{nav.title}</h2>
			</Flex.Item>
		))
	}
	renderNews() {
		return this.state.news.map(item => (
			<div className='news-item' key={item.id}>
				<div className='imgwrap'>
					<img
						className='img'
						src={item.img}
						alt=''
					/>
				</div>
				<Flex className='content' direction='column' justify='between' alignContent='between'>
					<h3 className='title'>{item.title}</h3>
					<Flex className='info' justify='between'>
						<span>{item.from}</span>
						<span>{item.date}</span>
					</Flex>
				</Flex>
			</div>
		))
	}

	render() {
		return (
			<div className='index'>
				{/* 轮播图 */}
				<div className='swiper'> 	{/* 撑起高度 */}
					{this.state.isSwiperLoaded ? <Carousel autoplay infinite autoplayInterval={3000}>{this.renderSwipers()}</Carousel> : ''}

					{/* 搜索框 */}
					<Flex className='search-box'>
						<Flex className='search'>
							{/* 位置 */}
							<div className='location' onClick={() => this.props.history.push('/citylist')}>
								<span className='name'>{this.state.curCityName}</span>
								<i className='iconfont icon-arrow' />
							</div>

							{/* 搜索框 */}
							<div className='form' onClick={() => this.props.history.push('/search')}>
								<i className='iconfont icon-seach' />
								<span className='text'>请输入小区或地址</span>
							</div>
						</Flex>

						{/* 地图图标 */}
						<i className='iconfont icon-map' onClick={() => this.props.history.push('/map')} />
					</Flex>
				</div>

				{/* 导航菜单 */}
				<Flex className='nav'> {this.renderNavs()} </Flex>

				{/* 租房小组 */}
				<div className='group'>
					<h3 className='group-title'>
						租房小组 <span className='more'>更多</span>
					</h3>

					<Grid
						data={this.state.groups}
						columnNum={2}
						square={false}
						hasLine={false}
						renderItem={(item) => (
							<Flex className='group-item' justify='around' key={item.id}>
								<div className='desc'>
									<p className='title'>{item.title}</p>
									<span className='info'>{item.desc}</span>
								</div>
								<img src={item.img} alt="" />
							</Flex>
						)}
					/>
				</div>

				{/* 资讯 */}
				<div className='news'>
					<h3 className='news-title'>最新资讯</h3>
					<WingBlank size='md'>{this.renderNews()}</WingBlank>
				</div>
			</div>
		);
	}
}